<template>
  <Tabs v-model:activeKey="activeKey" tabPosition="top" type="card"  size="small">
    <!-- 动态生成tab -->
    <TabPane v-for="(entityName,idx) in entityNames" :key="idx" :tab="entityName">
     <AnIndex :entityName="entityName"></AnIndex>
    </TabPane>
  </Tabs>
</template>
<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import { nextTick } from 'vue';
  import { Tabs, TabPane } from 'ant-design-vue';
  import AnIndex from "@/views/anno/table/index.vue";
  import { ref } from 'vue';
  const activeKey = ref(0);
  const route = useRoute();
  const entityNames = ref<string[]>([]);
  nextTick(
    () => {
      let queryForm = route.query;
      let _entityNames = queryForm.entityNames || '';
      entityNames.value = _entityNames.split(',');
    }
  );
</script>
<style scoped lang="less">
.card-container p {
  margin: 0;
}
.card-container > .ant-tabs-card .ant-tabs-content {
  height: 120px;
  margin-top: -16px;
}
.card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
  padding: 16px;
  background: #fff;
}
.card-container > .ant-tabs-card > .ant-tabs-nav::before {
  display: none;
}
.card-container > .ant-tabs-card .ant-tabs-tab,
[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab {
  background: transparent;
  border-color: transparent;
}
.card-container > .ant-tabs-card .ant-tabs-tab-active,
[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
  background: #fff;
  border-color: #fff;
}
#components-tabs-demo-card-top .code-box-demo {
  padding: 24px;
  overflow: hidden;
  background: #f5f5f5;
}
[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-content {
  height: 120px;
  margin-top: -8px;
}
[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab {
  background: transparent;
  border-color: transparent;
}
[data-theme='dark'] #components-tabs-demo-card-top .code-box-demo {
  background: #000;
}
[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
  background: #141414;
}
[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
  background: #141414;
  border-color: #141414;
}
</style>
